﻿<Window x:Class="CountJobTags.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CountJobTags"
        Title="Analyze Job Skills" Height="750" Width="705"
        MinHeight="300" MinWidth="400"
        FocusManager.FocusedElement="{Binding ElementName=btnFetch}"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        WindowStartupLocation="CenterScreen" >

    <Window.Resources>
        <!-- Used for the embedded button in the grid that shows/hides details -->
        <DataTemplate x:Key="PlusMinusCol">
            <Button Name="btnShowHideDetails" Content="+" Click="btnShowHideDetails_Click"/>
        </DataTemplate>

        <!-- Converts percentage to an int between 0 and 100, suitable for binding to a rectangle width to represent a bar graph -->
        <local:Pct2WidthConverter x:Key="widthConverter" />

        <!-- Additional resources are located in files in the Resources folder -->
    </Window.Resources>

    <DockPanel>

        <!-- The last item entered in the dock panel (i.e. the grid) will fill the dock panel; since the status bar is 
             docked (not filling), it has to go prior to the main content.
             The main content (we want it to fill) is hosted in the grid a few lines down.-->
        <StatusBar DockPanel.Dock="Bottom" >
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                <Label Content="_Zoom:" Target="{Binding ElementName=sldSize}" />
                <Slider Name="sldSize" Minimum=".5" Maximum="3.0" Width="75" ToolTip="Drag to resize" Value="1.0" />
                <!-- The TextBlock's style is animated and controlled through a bound property called 'EnableAnimations' -->
                <TextBlock Name="tbStatus" MinWidth="150" Background="White" 
                            Text="{Binding DataContext.StatusText}"
                            Style="{StaticResource AnimatedTextBlockStyle}" />
                <ProgressBar Name="prg" Height="20" Background="Chartreuse" Foreground="DarkMagenta" Visibility="Collapsed" Width="100" />
            </StackPanel>            
        </StatusBar>

        <Grid Name="Main_Content_Layout_Grid">
            <!-- First row -->
            <Border Grid.ColumnSpan="4" >
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="SlateBlue" Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
                <TextBlock FontSize="36" HorizontalAlignment="Center" Foreground="Chartreuse" Text="Stack Overflow Job Skills Analysis">
                    <TextBlock.Effect>
                        <DropShadowEffect Color="PaleGoldenrod" Opacity=".5" />
                    </TextBlock.Effect>
                </TextBlock>
            </Border>

            <!-- Second Row -->
            <Expander Grid.Row="1" Grid.ColumnSpan="4" Name="expInstructions" IsExpanded="True">
                <TextBlock Name="tbInstructions" FontSize="14" TextWrapping="Wrap" Background="SlateBlue" Foreground="White">
                    This app analyzes the jobs and skills on StackOverflow. Which job skills are most in demand? Can you identify the
                    most valuable skills by how long a job has been open? Use the results to wisely choose which skills <Italic>you</Italic> want to learn next.
                    <LineBreak />
                    <LineBreak />
                    <Span FontSize="11" >
                        Note: this app serves to <Italic>analyze</Italic> the listed jobs and skills. For example, it can help you discover
                        which skills are in demand. In contrast, if you want to <Italic>find</Italic> a job, the Stack Overflow site
                        <Italic>already</Italic> has nice search capabilities. This app does not seek to replicate those capabilities.
                    </Span>
                </TextBlock>
            </Expander>
            
            
            <!-- Third row-->
            <Button Grid.Row="2" Grid.Column="3" Height="30" Style="{StaticResource MainButtonStyle}"
                    Content="_Refresh Data from Web" Name="btnFetch" Click="btnFetch_Click" ToolTip="Go to Stack Overflow and Grab Data (over-writes existing file)" />
            
            <!-- Fourth row -->
            <TabControl Grid.Row="3" Grid.ColumnSpan="4" TabStripPlacement="Top" Name="tabGroup" SelectionChanged="tabGroup_SelectionChanged"  >
                <TabItem Header="_Counts By Skill" Margin="0,0,-4,-3">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <!-- RowStyle="{StaticResource selectedRowStyle}" Style="{StaticResource ExpandableGridStyle}" -->
                        <DataGrid AutoGenerateColumns="False" Name="grdCountsByTag" IsReadOnly="True" Grid.ColumnSpan="4" 
                                  RowDetailsVisibilityMode="Collapsed" 
                                  RowDetailsTemplate="{StaticResource JobCountsGridDetails}"
                                  RowStyle="{StaticResource selectedRowStyle}"
                                  Style="{StaticResource ExpandableGridStyle}" >
                            <DataGrid.Columns>
                                <DataGridTemplateColumn CellTemplate="{StaticResource PlusMinusCol}" />
                                <DataGridTextColumn Header="Skill"                  Binding="{Binding Tag}" />
                                <DataGridTextColumn Header="Count"                  Binding="{Binding Count}" />
                                <DataGridTextColumn Header="Rank"                   Binding="{Binding Rank}" />
                                <DataGridTextColumn Header="Pct"                    Binding="{Binding Pct, StringFormat=P}" />
                                <DataGridTextColumn Header="Avg. Age Hours"         Binding="{Binding AvgAgeInHours, StringFormat=N2}" />
                                <DataGridTemplateColumn Header="Avg. Age In Hours" CanUserSort="True" SortMemberPath="AvgAgeInHours">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <TextBlock Text="{Binding AvgAgeInHours, StringFormat=N2}" />
                                                <local:DataBoundSmiley Grid.Column="1" 
                                                                       SmilePct="{Binding DataContext.AvgJobAgePct, 
                                                                                  RelativeSource={RelativeSource AncestorType=DataGridRow}}" />
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition />
                                                    <ColumnDefinition Width="auto" />
                                                    <ColumnDefinition Width="auto" />
                                                </Grid.ColumnDefinitions>
                                            </Grid>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                                <DataGridTemplateColumn Header="%Allowing Remote" CanUserSort="True" SortMemberPath="PctAllowingRemote">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <Border Width="104" Height="20" >
                                                <Grid>
                                                    <Rectangle Height="18" HorizontalAlignment="Left" VerticalAlignment="Center" Fill="DarkBlue" Margin="2 0 2 0"
                                                            Width="{Binding PctAllowingRemote, Converter={StaticResource widthConverter}}" />
                                                    <TextBlock Background="Transparent" Foreground="BurlyWood" HorizontalAlignment="Center" Text="{Binding PctAllowingRemote, StringFormat=P}" />
                                                </Grid>
                                            </Border>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                                <DataGridTemplateColumn Header="Avg. # Related Skills" CanUserSort="True" SortMemberPath="AvgNumRelatedSkills">
                                    <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <TextBlock Text="{Binding AvgNumRelatedSkills, StringFormat=N2}" />
                                                <local:DataBoundSmiley Grid.Column="1" 
                                                                       SmilePct="{Binding DataContext.OtherJobAvgPct, RelativeSource={RelativeSource AncestorType=DataGridRow}}" />

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="auto" />
                                                    <ColumnDefinition />
                                                </Grid.ColumnDefinitions>
                                            </Grid>
                                        </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>
                            </DataGrid.Columns>
                        </DataGrid>

                        <!-- Search controls: -->
                        <Label Grid.Row="1" Content="_Tag Search" Target="{Binding ElementName=txtTagName}" 
                               VerticalAlignment="Center" />
                        <TextBox Grid.Row="1" Grid.Column="1" Name="txtTagName" 
                                 VerticalAlignment="Center"  Width="140" 
                                 TextChanged="txtTagName_TextChanged" />
                        <Button Grid.Row="1" Grid.Column="2" Name="btnTagSearch" 
                                Content="Search Grid for Skill" Margin="5" 
                                Click="btnTagSearch_Click"  
                                ToolTip="Searches for partial matches of your text in the tag column"
                                IsEnabled="{Binding EnableSkillSearch}"
                                Height="30"
                                Style="{StaticResource AnimatedEnableButtonStyle}"  />
                    </Grid>
                </TabItem>

                <TabItem Header="_Interact">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <Expander Grid.ColumnSpan="5" Header="Explanation and Instructions">
                            <Border BorderBrush="DarkBlue" BorderThickness="3" CornerRadius="5">
                                <TextBlock Grid.ColumnSpan="4" FontSize="12" TextWrapping="Wrap">
                                    You can search for jobs that are <Italic>hardest</Italic> to fill. Why? Because if you posses 
                                    a skill that is <Italic>rare</Italic> (i.e. hard to fill), you can command top dollar!
                                    are hard to fill. I believe that the hardest to fill jobs are those which
                                    <LineBreak />
                                    <ContentControl Template="{StaticResource BulletTemplate}" />
                                    Have been listed the longest, 
                                    <LineBreak />
                                    <ContentControl Template="{StaticResource BulletTemplate}" />
                                    Are most likely to allow remote work, and are 
                                    <LineBreak />
                                    <ContentControl Template="{StaticResource BulletTemplate}" />
                                    Associated with the fewest other skills. 
                                    <LineBreak /> 
                                    Play with the Y-Axis field and filter until you have 
                                    identified a skill you think is rare 
                                    and valuable! The law of supply and demand says that rare skills pay higher.
                                </TextBlock>
                            </Border>
                        </Expander>
                        
                        <Expander Header="Y-Axis" Margin="5" Grid.Row="1" >
                            <Border BorderBrush="DarkViolet" BorderThickness="3" CornerRadius="5">   
                                <StackPanel>
                                    <RadioButton Content="Skill Tag Count" Name="rdoCount" IsChecked="True" Checked="Y_AxisRadioButton_Checked"  />
                                    <RadioButton Content="Avg. Posting Age" Name="rdoAvgAge" ToolTip="Average age is based on how long the job has been posted on Stack Overflow" Checked="Y_AxisRadioButton_Checked"  />
                                    <RadioButton Content="% Remote Allowed" Name="rdoPctRemote" ToolTip="Based on the percentage of jobs allowing remote work" Checked="Y_AxisRadioButton_Checked"  />
                                    <RadioButton Content="Avg. # Other Skills/Job" Name="rdoAvgCountOtherSkills" ToolTip="Based on how many other skills (tags) are listed for each job" Checked="Y_AxisRadioButton_Checked"  />
                                </StackPanel>
                            </Border>
                        </Expander>

                        <Expander Header="Filters" Grid.Row="1" Grid.Column="1" ExpandDirection="Down" Margin="5">
                            <Border BorderBrush="DarkViolet" BorderThickness="3" CornerRadius="5">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <Label Content="Allows _Remote:" Target="{Binding ElementName=rdoRemoteDontCare}" />
                                    <StackPanel Orientation="Horizontal" Grid.Column="1" VerticalAlignment="Center" >
                                        <RadioButton Name="rdoRemoteDontCare" Content="Don't Care" IsChecked="True" Margin="2 0" Checked="Y_AxisRadioButton_Checked" />
                                        <RadioButton Name="rdoRemoteYes" Content="_Yes" Margin="2 0" Checked="Y_AxisRadioButton_Checked" />
                                        <RadioButton Name="rdoRemoteNo" Content="_No" Margin="2 0" Checked="Y_AxisRadioButton_Checked" />
                                    </StackPanel>

                                    <Label Grid.Row="1" Content="_Min Tag Count:" Target="{Binding ElementName=updMinCount}" />
                                    <local:NumericUpDown Grid.Row="1" Grid.Column="1" x:Name="updMinCount" Minimum="1" Grid.ColumnSpan="2" Margin="2,0,23,0" ValueChanged="updMinCount_ValueChanged" />

                                    <Label Grid.Row="2" Content="_State(s):" Target="{Binding ElementName=cboStates}" />
                                    <local:CheckableComboBox x:Name="cboStates" Grid.Row="2" Grid.Column="1" 
                                                         UsageSuggestionChanged="checkableCombo_UsageSuggestionChanged" 
                                                         FocusLost="checkableComboBox_LostFocus" SelectionChanged="CheckableCombo_SelectionChanged"  />

                                    <Label Grid.Row="3" Content="_Country(s):" Target="{Binding ElementName=cboCountry}" />
                                    <local:CheckableComboBox x:Name="cboCountry" Grid.Row="3" Grid.Column="1" 
                                                         UsageSuggestionChanged="checkableCombo_UsageSuggestionChanged" 
                                                         FocusLost="checkableComboBox_LostFocus"  SelectionChanged="CheckableCombo_SelectionChanged" />
                                </Grid>
                            </Border>
                        </Expander>

                        <Button Grid.Row="1" Grid.Column="2" Content="Refresh Graph" Name="btnApplyFilters" VerticalAlignment="Top"
                                Height="30" Margin="3"
                                Style="{StaticResource AnimatedEnableButtonStyle}"
                                Click="btnApplyFilters_Click" ToolTip="Applies your filters/modifies Y-Axis and refreshes the display" />


                        <!-- This listbox is styled to look like a bar chart-->
                        <ListBox Grid.Row="2" Grid.ColumnSpan="5" Name="lstTagsGraph" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                 ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemTemplate="{StaticResource ListBoxGraphItemTemplate}">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" IsItemsHost="True">
                                    </StackPanel>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        </ListBox>
                    </Grid>
                </TabItem>
            </TabControl>

            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition />
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            
            <Grid.LayoutTransform>
                <ScaleTransform ScaleX="{Binding ElementName=sldSize,Path=Value}" ScaleY="{Binding ElementName=sldSize,Path=Value}" />
            </Grid.LayoutTransform>
        </Grid>
    </DockPanel>

    <!-- Instead of linking to an image file, build our own icon here -->
    <Window.Icon>
        <DrawingImage>
            <DrawingImage.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,20,20" />
                    </GeometryDrawing.Geometry>
                    <GeometryDrawing.Brush>
                        <VisualBrush>
                            <VisualBrush.Visual>
                                <TextBlock Text="SKZ" FontSize="8"
                                                Background="DarkViolet"
                                                Foreground="Yellow" />
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </GeometryDrawing.Brush>
                </GeometryDrawing>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Icon>
</Window>
